<template>
	<section> 
	   	<el-row> 
			<el-form  v-if="configVisible" ref="extInfosRef">  
				<!-- 扩展字段[{name:'中文名称',id:'编号',value:'值',remark:'备注',type:'支持简单的1-普通文本2-数字，3-日期，8-富文本，9单图文，15-是否'}] -->
				<el-row v-for="(item, index) in extInfosList" :key="index">
					<el-form-item v-if="!item.type" > 
						<el-select v-model="item.type" style="width:120px;">
							<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
						</el-select>
						<el-input  style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp; 
 						<el-button  @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
						</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> 
					</el-form-item>
					<el-form-item v-else-if="item.type=='1'" > 
						<el-select v-model="item.type"  style="width:120px;">
							<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
						</el-select>
						<el-input  style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp; 
 						<el-button  @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
						</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> 
					</el-form-item>
					<el-form-item v-else-if="item.type=='2'"  > 
						<el-select v-model="item.type" style="width:120px;">
							<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
						</el-select>
						<el-input  style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input type="number" style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp; 
 						<el-button  @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
						</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> 
					</el-form-item>
					<el-form-item v-else-if="item.type=='3'"  > 
						<el-select v-model="item.type" style="width:120px;">
							<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
						</el-select>
						<el-input  style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-date-picker style="width:30%;" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="item.value" placeholder="请输入数据"></el-date-picker>&nbsp;&nbsp;
 
 						<el-button  @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
						</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> 
					</el-form-item>
					<el-form-item v-else-if="item.type=='8'"  > 
						<el-select v-model="item.type" style="width:120px;">
							<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
						</el-select>
						<el-input  style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input type="textarea" rows=6 style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp; 
 						<el-button  @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
						</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> 
					</el-form-item>
					<el-form-item v-else-if="item.type=='9'"  > 
						<el-select v-model="item.type" style="width:120px;">
							<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
						</el-select>
						<el-input  style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:10%;" v-model="item.name" placeholder="图片名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:20%;" v-model="item.value" placeholder="图片访问地址"></el-input>&nbsp;&nbsp; 
						<el-input  style="width:20%;" v-model="item.link" placeholder="跳转地址"></el-input>&nbsp;&nbsp; 
						<el-input  style="width:20%;" v-model="item.remark" placeholder="图片备注"></el-input>&nbsp;&nbsp;  
 						<el-button  @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
						</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> 
					</el-form-item>
					<el-form-item v-else-if="item.type=='15'"  > 
						<el-select v-model="item.type" style="width:120px;">
							<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
						</el-select>
						<el-input  style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-input  style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
						<el-radio   v-model="item.value" :label="'1'" placeholder="">是</el-radio>&nbsp;&nbsp;
						<el-radio   v-model="item.value" :label="'0'" placeholder="">否</el-radio>&nbsp;&nbsp;  
						<el-button  @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
						</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> 
					</el-form-item>
					 
				</el-row>
				<el-form-item>
					<el-button @click="configVisible=false" icon="el-icon-back"><slot>返回</slot></el-button> 
					<el-button @click="addExtInfosFirstItem" icon="el-icon-plus"><slot>新增一行</slot></el-button> 
				</el-form-item>
			</el-form> 
			<el-form  v-else ref="extInfosRef" class="demo-dynamic">  
				<!-- 扩展字段[{name:'中文名称',id:'编号',value:'值',remark:'备注',type:'支持简单的1-普通文本2-数字，3-日期，8-富文本，9单图文，15-是否'}] -->
				<el-row v-for="(item, index) in extInfosList" :key="index">
					<el-form-item v-if="!item.type" :label="item.name">  
						<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp; 
						<el-input style="width:20%;" v-model="item.url" placeholder="请输入跳转链接"></el-input>&nbsp;&nbsp;
						<el-input style="width:20%;" v-model="item.extInfo" placeholder="其它信息"></el-input>&nbsp;&nbsp;
 					</el-form-item>
					<el-form-item v-else-if="item.type=='1'" :label="item.name"> 
 						<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp; 
 					</el-form-item>
					<el-form-item v-else-if="item.type=='2'" :label="item.name"> 
 						<el-input type="number" style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp; 
					</el-form-item>
					<el-form-item v-else-if="item.type=='3'" :label="item.name"> 
						 
						<el-date-picker style="width:30%;" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="item.value" placeholder="请输入数据"></el-date-picker>&nbsp;&nbsp;
						 
					</el-form-item>
					<el-form-item v-else-if="item.type=='8'" :label="item.name">  
						<el-input type="textarea" rows=6 style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
						 
					</el-form-item>
					<el-form-item v-else-if="item.type=='9'" :label="item.name">  
						<el-input  style="width:30%;" v-model="item.value" placeholder="请输入图片地址"></el-input>&nbsp;&nbsp; 
					</el-form-item>
					<el-form-item v-else-if="item.type=='15'" :label="item.name">  
						<el-radio   v-model="item.value" :label="'1'" placeholder="">是</el-radio>&nbsp;&nbsp;
						<el-radio   v-model="item.value" :label="'0'" placeholder="">否</el-radio>&nbsp;&nbsp; 
					</el-form-item>
					 
				</el-row> 
				
				<el-form-item v-if="!unConfig"> 
					<el-button @click="configVisible=true" icon="el-icon-setting"><slot>配置扩展字段</slot></el-button> 
				</el-form-item>
			</el-form> 
		   </el-row>
	</section>
</template>

<script> 
	import { mapGetters } from 'vuex'
	 
 	
	export default {  
		name: 'extInfos',
		props:['value','unConfig'],
		computed: {
		    ...mapGetters([
		      'workSpace','userInfo'
		    ])
		},
		watch:{
			value(val){
				
				this.initData();
			},
			extInfosList:{
				deep:true,
				handler(val,oldVal){  
					if(this.value instanceof Array){
						this.$emit("input",val)
					}else{ 
						this.$emit("input",JSON.stringify(val))
					}
				}
			}, 
		},
		data() { 
			return{
				configVisible:false,
				itemTypes:[//支持简单的1-普通文本2-数字，3-日期，8-富文本，9单图文，15-是否'
					{id:'1',name:'普通文本'},
					{id:'2',name:'数字'},
					{id:'3',name:'日期'},
					{id:'8',name:'富文本'},
					{id:'9',name:'单图文'},
					{id:'15',name:'是否'}
				],
				extInfosList:[],//[{name:'中文名称',id:'编号',value:'值',link:'超链接',remark:'备注',type:'支持简单的1-普通文本2-数字，3-日期，8-富文本，9单图文，15-是否'}]

			}
		},//end data
		methods: { 
			addExtInfosFirstItem(){
				if(!this.extInfosList){
					this.extInfosList=[]
				}
				this.extInfosList.push({id:'',name:'字段名'+this.extInfosList.length+'(请修改)',value:'',url:'',extInfo:'',type:'1',remark:''})
			},
			addExtInfosItem(item,index){ 
				this.extInfosList.splice(index+1,0,{id:'',name:'字段名'+(index+1)+'(请修改)',value:'',url:'',extInfo:'',type:'1',remark:''})
			},
			removeExtInfosItem(item,index){
				this.extInfosList.splice(index,1)
			},
			initData(){
				if(this.value){
					if(this.value instanceof Array){
						this.extInfosList=this.value
					}else{
						this.extInfosList=JSON.parse(this.value)
					}
				}else{
					this.extInfosList=[]
				}
			}
		},//end methods
		components: {  
			 
		},
		mounted() { 
			 this.initData();
			
			
		}
	}

</script>

<style scoped>
	 
</style>